<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加图书</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <!-- 引入文件上传的插件库-->
    <script src="./static/js/ajaxupload.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        main .myform {
            width: 30%;
            margin-left: 40px;
        }

        main p {
            display: block;
            width: 100%;
            /* position: absolute;
            bottom: 20px; */
            text-align: center;
            margin: 20px 0;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <script>
        // 声明一个变量，存放上传成功后的图片的远程路径
        let coursePic = '';
        $(function (){
            initMenu();
            fileUpload();
        })
        /**
         * 文件上传
         */
        function fileUpload(){
            //上传图片
            new AjaxUpload('#addLabProdPic', {
                action: '/bookshop/upload',// 对应服务器的url地址,大家只改这里一处地方
                name: 'picFile',
                responseType: 'json',
                onSubmit : function(file , ext){
                    if (ext && /^(jpg|png|bmp)$/.test(ext.toLowerCase())){
                        this.setData({
                            'picName': file
                        });
                    } else {
                        alert("请上传格式为 jpg|png|bmp 的图片！");
                        return false;
                    }
                },
                onComplete : function(file,response){
                    if(response.error) {
                        alert(response.error);
                        return;
                    }
                    console.log("response",response)
                    coursePic = "/bookshop/imgs/bookPic/"+response.result;// 大家这里只需要改称自己的根路径
                    console.log("获取上传的图片："+coursePic)
                    $('#viewImg').attr('src',coursePic);
                }
            });
        }
        /**
         * 初始化图书类别下拉菜单
         */
        function initMenu(){
            $.ajax({
                type:'get',
                url:'/bookshop/booktype/queryList',
                cache: false,
                dataType: 'json',
                success:function (res){
                    console.log("请求图书类别数据：",res.result);
                    if(res.code == 1 && res.result){
                        // 动态生成下拉列表
                        $("#booktypeId").append($(`
                              <option className = "disabled" readonly value="default">请选择图书类别</option>
                        `))
                        for(let val of res.result){
                            $("#booktypeId").append($(`
                                <option value="${val.booktypeId}">${val.booktypeName}</option>
                            `))
                        }
                    }
                },
                error:function (err){
                    bootoast({
                        message: '服务器请求错误！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                }
            })
        }

    </script>
</head>

<body>
<div class="container-fluid my-container">
    <main>
        <!-- 路径导航 -->
        <ol class="breadcrumb" style="margin-top:5px;">
            <li><a href="#">主页</a></li>
            <li><a href="#">图书管理</a></li>
            <li class="active">添加图书</li>
        </ol>
        <!-- 表单 -->
        <div class="myform">
            <form id="myForm" action="/bookshop/book/add" method="post">
                <!-- 图书名称 -->
                <div class="form-group">
                    <label for="bookName">图书名称：</label>
                    <input type="text" class="form-control" name="bookName" id="bookName" placeholder="请输入图书名称">
                </div>
                <!-- 图书类别 -->
                <div class="form-group">
                    <label for="booktypeId">图书类别：</label>
                    <!-- 下拉列表 -->
                    <select class="form-control" id="booktypeId" value="default">

                    </select>
                </div>
                <!-- 图书封面 -->
                <div class="form-group" >
                    <label>封面图片：</label>
                    <div>
                        <img src="./static/img/default-pic.png" class="img-thumbnail" alt="" style="height: 120px;position: relative;left: 0px;" id="viewImg" />
                        <button type="button" class="btn btn-primary btn-xs" id="addLabProdPic" style="margin-left: 40px;"><i class="glyphicon glyphicon-folder-open"></i> &nbsp;选择图片</button>
                    </div>

                </div>
                <!-- 图书作者 -->
                <div class="form-group">
                    <label for="author">作<span style="color:transparent;user-select: none;">隐藏</span>者：</label>
                    <input type="text" class="form-control" name="author" id="author" placeholder="请输入图书作者">
                </div>
                <!-- 出版社 -->
                <div class="form-group">
                    <label for="publishingHouse"><span style="color:transparent;user-select: none;">隐</span>出版社：</label>
                    <input type="text" class="form-control" name="publishingHouse" id="publishingHouse" placeholder="请输入出版社">
                </div>
                <!-- 出版日期 -->
                <div class="form-group">
                    <label for="publishingDate">出版日期：</label>
<!--                    <input type="date" class="form-control" name="publishingDate" id="publishingDate" placeholder="请输入出版日期">-->
                    <div class="input-group">
<!--                        <div class="input-group-addon">￥</div>-->
                        <input type="date" class="form-control" name="publishingDate" id="publishingDate" placeholder="请输入初版日期">
                        <div class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></div>
                    </div>
                </div>
                <!-- 图书价格 -->
                <div class="form-group">
                    <label for="price">图书价格：</label>
                    <div class="input-group">
                        <div class="input-group-addon">￥</div>
                        <input type="text" class="form-control" name="price" id="price" placeholder="请输入图书价格">
                        <div class="input-group-addon">.00</div>
                    </div>
                </div>
                <!-- 图书描述 -->
                <div class="form-group">
                    <label for="depict">描<span style="color:transparent;user-select: none;">隐藏</span>述：</label>
                    <textarea class="form-control" rows="3" name="depict" id="depict" placeholder="请输入图书的描述信息"></textarea>
                </div>
                <button type="button" class="btn btn-success" onclick="save()"><i class="glyphicon glyphicon-ok"></i>&nbsp;保存</button>
            </form>

        </div>
    </main>
    <!-- 尾部 -->
<!--    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>-->
</div>
<script>
    // 保存，提交表单的方法
    function save() {
        // 获取表单数据
        let bookName = $("#bookName").val();
        let booktypeId = $("#booktypeId option:selected").val();
        let bookPic = coursePic;
        let author =  $("#author").val();
        let publishingHouse =  $("#publishingHouse").val();
        let publishingDate =  $("#publishingDate").val();
        let depict =  $("#depict").val();
        let price =  $("#price").val();
        // 进行非空校验
        if (!bookName || bookName === '') {
            bootoast({
                message: '图书名称不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!booktypeId || booktypeId === '') {
            bootoast({
                message: '图书类别不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!bookPic || bookPic === '') {
            bootoast({
                message: '图书封面不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!author || author === '') {
            bootoast({
                message: '图书作者不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!publishingHouse || publishingHouse === '') {
            bootoast({
                message: '出版社不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!publishingDate || publishingDate === '') {
            bootoast({
                message: '出版日期不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!price || price === '') {
            bootoast({
                message: '图书价格不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }
        if (!depict || depict === '') {
            bootoast({
                message: '图书描述不能为空！',
                type: 'danger',
                position: 'top',
                timeout: 2
            });
            return false;
        }

        // 提交表单
        $.ajax({
            type: 'post',// 提交方式 post
            url: $("#myForm").attr("action"),// /bookshop/book/add
            cache: false,// 不启用缓存
            data: `bookName=${bookName}&bookType.booktypeId=${booktypeId}&bookPic=${bookPic}&author=${author}&publishingHouse=${publishingHouse}&publishingDate=${publishingDate}&price=${price}&depict=${depict}`,// 数据可以自由拼接
            dataType: 'json',// 期望服务器响应的数据类型 json
            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                console.log(result);
                // 提示
                bootoast({
                    message: result.msg,
                    type: 'success',
                    position:'top',
                    timeout:2
                });
                setTimeout(()=>{
                    window.location.href="book-list.html"
                },2000)
            },
            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                // 提示
                bootoast({
                    message: '服务器请求错误！',
                    type: 'danger',
                    position:'top',
                    timeout:2
                });
            }

        })
        return true;
    }
</script>
</body>
</html>